<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 500px;
            margin: 200px auto;
        }

        ul {
            width: 392px;
            padding: 5px;
            list-style: none;
            border: 1px solid red;
        }

        li:hover {
            background-color: red;
        }

        input {
            width: 400px;
        }

        button {
            width: 70px;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text"/>
    <button>搜索</button>
    <!--<ul>-->
    <!--<li>aaaa</li>-->
    <!--<li>bbb</li>-->
    <!--<li>ccc</li>-->
    <!--</ul>-->
</div>

<script>
    //需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。

    //1.获取事件源
    //模拟服务器获取内容
    var arr = ["a", "ab", "abc", "abcd", "aa", "aaa"];
    var box = document.getElementsByTagName("div")[0];
    var inp = box.children[0];
    //        var inp = document.getElementsByTagName("input")[0];

    //2.绑定事件(输入内容(输入事件，键盘弹起事件))
    inp.onkeyup = function () {
        //创建一个字符串，里面添加满了li和对应的内容。
        var newArr = [];
        //遍历老数组arr，然后判断每一项，只要是以input的内容为开头的，就添加到新数组newArr中，然后转成字符串。
        for (var i = 0; i < arr.length; i++) {

            //获取输入内容input标签的value属性值。
            if (arr[i].indexOf(this.value) === 0) {  //【重要】判断老数组arr中的每一项，是否以input的内容为开头
                newArr.push("<li>" + arr[i] + "</li>");
            }
        }
        var str = newArr.join("");

        //Bug1：每次创建新的ul之前，如果有旧的ul，就先删除旧的ul
        if (box.getElementsByTagName("ul")[0]) {
            //只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
            box.removeChild(box.children[2]);
        }

        //Bug2.如果input的内容为空，那么就不能再生成ul了。
        //如果input为空，那就切断函数

        //Bug3.如果arr数组中找不到以input为开头的元素。那就切断函数
        //newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
        if (this.value.length === 0 || newArr.length === 0) {  //fix bug2、fix bug3
            //切断函数，直接return
            return;
        }

        //3.书写事件驱动程序
        var ul = document.createElement("ul");
        //把创建好的内容添加到ul中。
        ul.innerHTML = str;
        box.appendChild(ul);
    }
</script>
</body>
</html>
